<template>
  <div class="user-management">
    <!-- 标题 -->
    <h2>人员信息管理中心</h2>
    <!-- 人员录入按钮 -->
    <el-button class="add-user-btn" type="primary" @click="goToAddUser">人员录入</el-button>
    <!-- 用户信息表格 -->
    <el-table :data="users">
      <!-- 姓名列 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <!-- 年龄列 -->
      <el-table-column prop="age" label="年龄"></el-table-column>
      <!-- 身份证号列 -->
      <el-table-column prop="idCard" label="身份证号"></el-table-column>
      <!-- 证件照片列 -->
      <el-table-column label="证件照片">
        <!-- 使用插槽显示照片 -->
        <template slot-scope="scope">
          <img :src="scope.row.photoUrl" alt="证件照片" class="photo-preview" />
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作">
        <!-- 使用插槽显示编辑和删除按钮 -->
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'UserManagement', // 组件名称
  data() {
    return {
      users: [], // 用户信息数据
    };
  },
  created() {
    this.fetchUsers();
    // 组件创建时，如果路由参数中有新用户信息，则添加新用户
    if (this.$route.params.newUser) {
      this.addNewUser(this.$route.params.newUser);
    }
  },
  methods: {
    fetchUsers() {
      axios.get('http://localhost:8083/users')
          .then(response => {
            this.users = response.data;
          })
          .catch(error => {
            console.error('Error fetching users:', error);
          });
    },
    goToAddUser() {
      // 跳转到人员录入页面
      this.$router.push('/dashboard/user-add');
    },
    editUser(id) {
      // 跳转到人员编辑页面，传递用户ID
      this.$router.push(`/dashboard/user-edit/${id}`);
    },
    deleteUser(id) {
      // 从数据库删除用户
      axios.delete(`http://localhost:8083/users/${id}`)
          .then(response => {
            console.log(response.data.message);
            // 更新前端用户列表
            this.users = this.users.filter(user => user.id !== id);
          })
          .catch(error => {
            console.error('Error deleting user:', error);
          });
    },
    addNewUser(newUser) {
      // 添加新用户，简单的ID分配策略
      newUser.id = this.users.length + 1;
      this.users.push(newUser);
    }
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      // 当路由名称为userManagement并且从userAdd页面返回时，如果有新用户信息，则添加新用户
      if (to.name === 'userManagement' && from.name === 'userAdd' && from.params.newUser) {
        this.addNewUser(from.params.newUser);
      }
    }
  }
};
</script>

<style scoped>
.add-user-btn {
  float: right; /* 按钮浮动到右侧 */
  margin-bottom: 10px; /* 底部边距 */
}
.photo-preview {
  width: 50px; /* 照片预览宽度 */
  height: 50px; /* 照片预览高度 */
}
</style>
